﻿<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>黎黎520</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
        @font-face {
            font-family: digit;
            src: url('digital-7_mono.ttf') format("truetype");
        }
    </style>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link href="css/default.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/garden.js"></script>
    <script type="text/javascript" src="js/functions.js"></script>
    <script type="text/javascript" src="js/jq.snow.js"></script>
    <style>
    .music{
        position: fixed;
        right: 4%;
        top: 2%;
        width: 120px;
        height: 120px;
        z-index: 999999;
        opacity:0.5
    }
    .musicRotate{
        animation-name:musicrotate;
        animation-duration: 4s; /*动画时间*/
        animation-timing-function:linear;
        -webkit-animation-timing-function:linear; /* Safari 和 Chrome */
        animation-fill-mode: both; /*播放后的状态*/
        animation-iteration-count: infinite; /*动作循环的次数：infinite 无限循环*/
    }
    @keyframes musicrotate{
        0%{-webkit-transform:rotate(0deg);}
        25%{-webkit-transform:rotate(90deg);}
        50%{-webkit-transform:rotate(180deg);}
        75%{-webkit-transform:rotate(270deg);}
        100%{-webkit-transform:rotate(360deg);}
    }
    </style>
</head> 

<body>
    <script>
    $(function(){
        $.fn.snow({ 
            minSize: 5,//雪花的最小尺寸
            maxSize: 50,//雪花的最大尺寸
            newOn: 150//雪花出现的频率 这个数值越小雪花越多
        });
    });

    function playMusic(obj) {
        var player = $("#player")[0]; /*jquery对象转换成js对象*/
        if (player.paused){ /*如果已经暂停*/
            player.play(); /*播放*/
            $(obj).addClass('musicRotate');
            $(obj).attr('src','musicP.png')
        }else {
            player.pause();/*暂停*/
            $(obj).removeClass('musicRotate');
            $(obj).attr('src','musicS.png')
        }
    }
    </script>
    <img onClick="playMusic(this)" class="music musicRotate" src="musicP.png">
    <div id="mainDiv">
        <div id="content">
            <div id="code">
                <span class="comments">/**</span><br />
                <span class="space"/><span class="comments">* 亲爱的李黎黎同学：</span><br />
                <span class="space"/><span class="comments">* 你好鸭~ </span><br />
                <span class="space"/><span class="comments">* 今天是2022年5月20日</span><br />
                <span class="space"/><span class="comments">* 这是我们认识的第189天</span><br />
                <span class="space"/><span class="comments">* 希望这在个特殊的日子里，留下一些属于我们的爱情回忆。</span><br />
                <span class="space"/><span class="comments">*/</span><br />
                Girl u = <span class="keyword">new</span> Girl(<span class="string">"李晗黎"</span>);<br/>
                Boy i = <span class="keyword">new</span> Boy(<span class="string">"何川"</span>);<br />
                <span class="comments">// 2021年10月11日是我们第一次相遇!</span><br />
                <span class="comments">// 永远忘不了那个漂亮又古灵精怪的小孟庭苇^-^</span><br />
                <span class="comments">// 还记得我们紧挨着肩走过了长长的马路</span><br />
                <span class="comments">// 坐在小区楼下的椅子聊着光怪陆离的经历相视而笑~</span><br />
                <span class="comments">// 那天晚上，梦中一直浮现出你可爱的样子^-^ </span><br />
                非常高兴遇见你！<br />
                <span class="placeholder"/>初次见面 = 喜欢你</span><br />
                <span class="comments">// 心有灵犀的我们进展很顺利，每天早晚的问候变成了每天的习惯~</span><br />
                <span class="comments">// 我们一起逛街吃饭，打卡每一个想要去到的角落 </span><br />
                <span class="comments">// 初次吻你的瞬间，我感受到自己剧烈的心跳 </span><br />
                <span class="comments">// 我明白，我已经深深爱上了你！ </span><br />
                感谢你突然走进了我的生活，让我感受到其实老天对我还不错！<br />
                <span class="placeholder"/>再次见面 = 爱上你</span><br />
                <span class="comments">// 生活不总是一帆风顺的，酸甜苦辣总是常态！</span><br />
                <span class="comments">// 当你的生活遭遇突如其来的变故，看着你哭的眼泪已干的样子</span><br />
                <span class="comments">// 真的很心疼，多么想能替你分担心中的烦恼和忧愁</span><br />
                <span class="comments">// 那么以后的日子就由我陪你一起走过吧！ </span><br />
                一辈子很长,我想照顾你 <br />
                <span class="placeholder"/>一辈子 = 彼此依靠</span><br />
                <span class="comments">// 在一起的日子里 </span><br />
                <span class="comments">// 尽管我们分隔两地不能经常相见，但还是在一起有过很多美好的点点滴滴 </span><br />
                <span class="comments">// 武汉的大学美食街，成都的街头小吃巷，都留下了我们甜蜜的身影 </span><br />
                <span class="comments">// 我永远忘不了 </span><br />
                <span class="comments">// 你一边掉小珍珠一边哭着说“好饿,就想吃点好吃的"时的可爱模样^-^ </span><br />
                <span class="comments">// 我知道我不是一个很会甜言蜜语，会随时表达爱意的人 </span><br />
                <span class="comments">// 生活中也有很多做的不到位的地方 </span><br />
                <span class="comments">// 非常感谢你一直以来的理解和包容 </span><br />
                <span class="comments">// 对这样一个一无是处的我还能一直爱的不离不弃！ </span><br />
                只有在你的微笑里，我才能感觉到呼吸<br />
                <span class="placeholder"/>黎黎 = i love u</span><br />
                希望<span class="keyword"> 我们的爱 </span>像右边的<span class="keyword"> 计时器 </span>一样<span class="keyword"> 永不停歇的走下去，直到地老天荒！ </span><br />
                <span class="keyword">我会</span> 一直  <span class="keyword">爱你</span>;<br />
                <span class="placeholder"/><span class="comments">// 在这个恋爱的特殊日子里，我有一个重要的事情想征求你的意见</span><br />
                <span class="placeholder"/><span class="comments">// 你可以在任何时候决定~</span><br />
                <span class="placeholder"/>你...........<span class="keyword">愿意陪我共度余生吗？ </span><br /><br />
                <a href="fire.html">准备好了吗？点击我吧</a><br />
            </div>
            <div id="loveHeart">
                <canvas id="garden"></canvas>
                <div id="words">
                    <div id="messages">
                                黎黎，我们已经相爱了：
                        <div id="elapseClock"></div>
                    </div>
                    <div id="loveu">
                        <div class="signature">--何川</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        var offsetX = $("#loveHeart").width() / 2;
        var offsetY = $("#loveHeart").height() / 2 - 55;
        var together = new Date();
        together.setFullYear(2021, 10, 11);
        together.setHours(18);
        together.setMinutes(24);
        together.setSeconds(0);
        together.setMilliseconds(0);
        
        if (!document.createElement('canvas').getContext) {
            var msg = document.createElement("div");
            msg.id = "errorMsg";
            msg.innerHTML = "Your browser doesn't support HTML5!<br/>Recommend use Chrome 14+/IE 9+/Firefox 7+/Safari 4+"; 
            document.body.appendChild(msg);
            $("#code").css("display", "none")
            $("#copyright").css("position", "absolute");
            $("#copyright").css("bottom", "10px");
            document.execCommand("stop");
        } else {
            setTimeout(function () {
                startHeartAnimation();
            }, 5000);

            timeElapse(together);
            setInterval(function () {
                timeElapse(together);
            }, 500);

            adjustCodePosition();
            $("#code").typewriter();
        }
    </script>
    <audio autoplay loop id="player"><source src="jiaoluo.mp3"/></audio>
</body>
</html>
